<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- reset.css是清楚我页面的默认样式 -->
	<link rel="stylesheet" th:href="@{/css/reset.css}">
	<!-- 二级页面的公共样式代码 -->
	<link rel="stylesheet" th:href="@{/css/common.css}">
	<!-- 自己独有的样式代码 -->
	<link rel="stylesheet" th:href="@{/css/allProducts.css}">
	<link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
	<link rel="stylesheet" th:href="@{/css/qingzhu0.css}">
	<link rel="stylesheet" th:href="@{/css/qingzhu6.css}">
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<div th:replace="common::header"></div>
	<!-- header部分结束 -->
	<div class="s_content">
		<div class="s_content_c inner_c">
			<div class="s_info">
				<div class="s_title">
					<a href="#">
						首页
					</a>
					&gt;
					<span>
						所有商品
					</span>
				</div>
				<div>
					<label class="layui-form-label">商品搜索</label>
					<div class="layui-input-inline" style="width: 220px;">
						<input id="kayword" type="text" name="keyword" placeholder="请输入关键字" autocomplete="off" class="layui-input">
					</div>
					<button class="layui-btn"  lay-filter="formDemo" onclick="search()">搜索商品</button>
				</div>
				<div class="screen">
					<table>
						<tr class = "t2">
							<th>类别</th>
							<td class="type" >
								<a style="cursor: pointer" th:each="type:${session.typelist}" th:object="${type}" th:onclick="'javascript:typeData(\''+*{type}+'\');'" th:text="*{remark}">分类</a>
							</td>
						</tr>
					</table>
				</div>
				<div class="fun">
					<div class="sort">
						<span>排序：</span>
						<a href="javascript:void(0);" class="s1" onclick="productsort(1)">
							价格
						</a>
						<a href="javascript:void(0);" class="s2" onclick="productsort(2)">
							销量
						</a>
					</div>
					<div class="total">
						共<span>20</span>个商品
					</div>
				</div>
				<div class="s_prod">
					<ul class = "pub_pro" id="product_list">
						<li>
							<img th:src="@{/image/img47.png}" alt="">
							<div class="cont">
								<h3>不锈钢汤勺</h3>
								<span>￥300</span>
							</div>
							<div class="mask">
								<a href="#" class="btn">查看详情</a>
							</div>
						</li>
						<li>
							<img th:src="@{/image/img47.png}" alt="">
							<div class="cont">
								<h3>不锈钢汤勺</h3>
								<span>￥300</span>
							</div>
							<div class="mask">
								<a href="#" class="btn">查看详情</a>
							</div>
						</li>
					</ul>
				</div>
				<div id="pageControl">
					<button class="pro" onclick="page.goPage(-1)">上一页</button>
					<input type="text" class="pageNum" onblur="page.jumpPage(value)"> / <span class="totalPage"></span>
					<button class="next" onclick="page.goPage(1)">下一页</button>
				</div>
			</div>
		</div>
	</div>
<div th:replace="common::footer"></div>

</body>
<script th:src="@{/js/jqurey.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script>
	var type
	var allproduct
	var currenttype='all'
	var sort_price=1
	var sort_sales=-1
	var page={
		// 每一页的数量
		pageSize:16,
		// 数据量
		length:0,
		// 总页数
		totalPage:0,
		// 当前页数
		currentPage:1,
		// 分页内容
		pageContent:[],
		// 当前页面内容
		currentContent:[],
		// 设置分页
		setPage:function (data) {
			// 数据量
			this.length=data.length
			// 总页数计算
			if(this.length%this.pageSize!=0){
				this.totalPage=parseInt(this.length/this.pageSize)+1
			}else{
				this.totalPage=parseInt(this.length/this.pageSize)
			}
			for(var i=0;i<this.totalPage;i++){
				this.pageContent[i]=data.slice(i*16,i*16+16)
			}
			$(".pageNum").val(this.currentPage)
			$(".totalPage").html(this.totalPage)
			this.currentContent=this.pageContent[0]
		},
		// 页面上下页
		goPage:function (go) {
			var goNum=this.currentPage+parseInt(go)
			console.log("页面是"+goNum)
			if(goNum<1||goNum>this.totalPage){
				$(".pageNum").html(this.currentPage)
				return
			}else{
				this.currentPage=goNum
				$(".pageNum").val(this.currentPage)
				this.currentContent=this.pageContent[goNum-1]
				putDate(this.currentContent)
			}
		},
		// 页面跳转
		jumpPage:function (pageNum) {
			if(pageNum<1||pageNum>this.totalPage){
				$(".pageNum").html(this.currentPage)
				return
			}else{
				this.currentPage=pageNum
				this.currentContent=this.pageContent[pageNum-1]
				putDate(this.currentContent)
			}
		}
	}
	$(function () {
		var data="type=all"
		getDate(data)
	})
	function getDate(data){
		$.ajax({
			//请求方式
			type : "GET",
			//请求的媒体类型
			contentType: "application/json;charset=UTF-8",
			//请求地址
			url : "all.do",
			//请求成功
			success : function(data) {
				// 所有产品
				allproduct=data.data
				// 设置分页
				page.setPage(allproduct);
				putDate(page.currentContent)
			}
		});
	}
	function getDate(data){
		$.ajax({
			//请求方式
			type : "GET",
			//请求的媒体类型
			contentType: "application/json;charset=UTF-8",
			//请求地址
			url : "all.do",
			//请求成功
			success : function(data) {
				// 所有产品
				allproduct=data.data
				// 设置分页
				page.setPage(allproduct);
				putDate(page.currentContent)
			}
		});
	}
	function getTypeDate(data){
		$.ajax({
			//请求方式
			type : "GET",
			//请求的媒体类型
			contentType: "application/json;charset=UTF-8",
			//请求地址
			url : "category.do?type="+data+"&pageNo=0&pageSize=16",
			//请求成功
			success : function(data) {
				// 所有产品
				allproduct=data.data
				// 设置分页
				page.setPage(allproduct);
				putDate(page.currentContent)
			}
		});
	}
	function putType(type) {
		var type=type
		var typelist=$(".type")
		$(type).each(function (index, item) {
			var atag=$("<a href='javascript:void(0);' onclick='typeData("+item+")'>"+item+"</a>")
		})
	}
	function putDate(result){
		var product=result;
		var product_list=$("#product_list")
		product_list.empty()
		$(product).each(function (index, item) {
			var li=$("<li></li>")
			var img=$("<img src='/mall/image/"+item.mainImage+"'>")
			var cont=$("<div class='cont'><h3>"+item.name+"</h3><span class='price'>￥"+item.price+"</span><br><span class=\"sell\">已售："+item.sales+"</span><span class=\"stock\">库存："+item.store+"</span></div>")
			var mask=$("<div class='mask'><a href='/mall/product/get.html?id="+item.id+"' class='btn'>查看详情</a></div>")
			li.append(img)
			li.append(cont)
			li.append(mask)
			product_list.append(li)
		})
	}
	function typeData(type){
		currenttype=type
		getTypeDate(type)
	}

	var comparebyPrice = function (obj1, obj2) {
		var val1 = obj1.price;
		var val2 = obj2.price;
		if (val1 < val2) {
			return -sort_price;
		} else if (val1 > val2) {
			return sort_price;
		} else {
			return 0;
		}
	}
	var comparebySales = function (obj1, obj2) {
		var val1 = obj1.sales;
		var val2 = obj2.sales;
		if (val1 < val2) {
			return -sort_sales;
		} else if (val1 > val2) {
			return sort_sales;
		} else {
			return 0;
		}
	}
	function productsort(key) {
		if(key==1){
			allproduct.sort(comparebyPrice)
			page.setPage(allproduct)
			putDate(page.currentContent)
			sort_price=-sort_price
		}
		if(key==2){
			allproduct.sort(comparebySales)
			page.setPage(allproduct)
			putDate(page.currentContent)
			sort_sales=-sort_sales
		}

	}
	function search() {
		var keyword=$(" input[ name='keyword' ] ").val()
		if(keyword==''){
			alert("请输入关键词")
			return
		}
		$.ajax({
			//请求方式
			type : "GET",
			//请求的媒体类型
			contentType: "application/json;charset=UTF-8",
			//请求地址
			url : "findLike.do?name="+keyword+"&pageNo=0&pageSize=16",
			//请求成功
			success : function(data) {
				// 所有产品
				allproduct=data.data
				// 设置分页
				page.setPage(allproduct);
				putDate(page.currentContent)
			}
		});
	}
	// 商品分类
	// function typeData(type){
	// 	currenttype=type
	// 	var product=allproduct;
	// 	if(type!=='all') {
	// 		product = product.filter(function (item) {
	// 			return item.type === type;
	// 		})
	// 	}
	// 	var product_list=$("#product_list")
	// 	// 清空标签内容
	// 	product_list.empty()
	// 	putDate(product)
	//}

	// 商品排序
	// function productSort(sortby, s) {
	// 	allproduct.sort(function (obj1,obj2) {
	// 		if(obj1[sortby]<obj2[sortby]){
	// 			return -s;
	// 		}else if(obj1[sortby]>obj2[sortby]){
	// 			return s;
	// 		}else {
	// 			return 0;
	// 		}
	// 	})
	// 	typeData(currenttype)
	// }
</script>
</html>